<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/comments.css"/>
	<script type="text/javascript" src="../js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="../layer/layer.js"></script>
	<script type="text/javascript" src="../js/rem.js"></script>
		<script type="text/javascript">
			$(window).load(function() {
				$('#box').delay(300).show()
			})
		</script>
	</head>
	<body> 
		<!--页面加载 开始-->
		  <!--<div id="preloader">
		    <div id="status">
		      <p class="center-text"><span>拼命加载中···</span></p>
		    </div>
		  </div>-->
		  <!--页面加载 结束--> 
		<div id="box">
		<section class="comments" id="wrapper">
			<!--<div class="comments-cont">
				<img class="comments-cont-bg" src="../img/banner.jpg"/>
				<i onclick="goBack()" class="iconfont">&#xe621;</i>
				<img class="comments-cont-logo" src="../img/images/title_03.png"/>
				<p>VP战队重回世界之巅全程回顾</p>
				<div class="comments-top-head">
							<div></div>
						    <h2>10条评论</h2>
						    <div></div>
				</div>
				<p class="write-comments">写评论</p>
			</div>-->
			<!--<div class="comments-total clear">
				<ul class="comments-total-ul">-->
				<!--<li class="comments-content clear">
						<img class="comments-content-img" src="../img/images/circle_07.jpg"/>
					<div class="comments-content-tv clear">
						<div class="comments-content-left">
							<p>斗鱼TV</p>
							<p>13:12</p>
							<p>全民直播平台绝对是一部好片！！</p>
						</div>
						<div class="comments-content-right">
							<i class="iconfont dianzan">&#xe603;</i>
							<span class="zan-total">5</span>
						</div>
					</div>
			    </li>
			    <li class="comments-content clear">
					<img class="comments-content-img" src="../img/images/circle_07.jpg"/>
					<div class="comments-content-tv clear">
						<div class="comments-content-left">
							<p>斗鱼TV</p>
							<p>13:12</p>
							<p>全民直播平台绝对是一部好片！！</p>
						</div>
						<div class="comments-content-right">
							<i class="iconfont dianzan">&#xe603;</i>
							<span class="zan-total">5</span>
						</div>
					</div>
			    </li>
			    <li class="comments-content clear">
					<img class="comments-content-img" src="../img/images/circle_07.jpg"/>
					<div class="comments-content-tv clear">
						<div class="comments-content-left">
							<p>斗鱼TV</p>
							<p>13:12</p>
							<p>全民直播平台绝对是一部好片！！</p>
						</div>
						<div class="comments-content-right">
							<i class="iconfont dianzan">&#xe603;</i>
							<span class="zan-total">5</span>
						</div>
					</div>
			    </li>
			    <li class="comments-content clear">
					<img class="comments-content-img" src="../img/images/circle_07.jpg"/>
					<div class="comments-content-tv clear">
						<div class="comments-content-left">
							<p>斗鱼TV</p>
							<p>13:12</p>
							<p>全民直播平台绝对是一部好片！！</p>
						</div>
						<div class="comments-content-right">
							<i class="iconfont dianzan">&#xe603;</i>
							<span class="zan-total">5</span>
						</div>
					</div>
			    </li>-->
			  <!--  </ul>
			</div>-->
			<!--<div class="comments-footer">
			<input type="text" name="" id="btn-input"  value="" />
			<i class="iconfont send">&#xe633;</i>
		  </div>-->
		</section>
		<!--评论-->
			<div class="mask">
			</div>
			<div class="mask-top ">
				<textarea class="mask-textarea" name="" ></textarea>
				<div class="mask-button clear">
					<div class="mask-delect">取消</div>
				    <div class="mask-send">发送</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/reset.js"></script>
	<script type="text/javascript" src="../js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="../js/iscroll.js"></script>
	<script type="text/javascript">
	  //写评论
		/*$('.write-comments').on('click',function(){
			$('.mask').show()
    	  $('.mask-top').show()
    	  $('.mask-textarea').focus()
		})
	    $('.mask-delect').on('click',function(){
	    	$('.mask').hide()
	    	$('.mask-top').hide()
	    })
	    $('.mask-send').on('click',function(){
	    	$('.mask').hide()
	    	$('.mask-top').hide()
	    	
	    })*/
		//点赞效果的实现
         /*  $('.dianzan').one('click',function(){
           	 var zan=$(this).siblings('.zan-total').html()
           	  zan++
           	  $(this).siblings('.zan-total').html(zan)
           	  $(this).html('&#xe638;')
           })
			*/
		/*$('.mask-send').on('click',function(){
          if( $('.mask-textarea').val()==''){
          	alert('请输入内容')
          }else{
          	replayBox()
          	$('.mask-textarea').val('')
          }
		})*/
		
		
		//定义格式化日期函数getTime
            function getTime() {
                var t = new Date();
                var y = t.getFullYear();
                var m = t.getMonth() + 1;
                var d = t.getDate();
                var h = t.getHours();
                var mi = t.getMinutes();
                m = m < 10 ? '0' + m : m;
                d = d < 10 ? '0' + d : d;
                h = h < 10 ? '0' + h : h;
                mi = mi < 10 ? '0' + mi : mi;
                return  h + ':' + mi;
            }
            console.log(getTime())
             //定义发表评论函数replayBox
           function replayBox() {
                     var oImg=$("<img class='comments-content-img' src='../img/images/circle_07.jpg'>")
                     var oDiv1=$("<div class='comments-content-left'><p>斗鱼TV</p><p>"+getTime()+"</p><p>"+$('.mask-textarea').val()+"</p></div>")
                      var oDiv2=$("<div class='comments-content-right'><i class='iconfont dianzan'>&#xe603;</i><span class='zan-total'>"+5+"</span></div>")
                      var aLi=$("<li class='comments-content clear'></li>")
                      var oDiv=$("<div class='comments-content-tv clear'></div>")
                      oDiv.append(oDiv1)
                      oDiv.append(oDiv2)
                      aLi.append(oImg)
                      aLi.append(oDiv)
                      $('.comments-total-ul').append(aLi)
					$('.dianzan').one('click',function(){
		           	 var zan=$(this).siblings('.zan-total').html()
		           	  zan++
		           	  $(this).siblings('.zan-total').html(zan)
		           	  $(this).html('&#xe638;')
		           })
		          }
           
           /*评论列表*/
	   var c=localStorage.getItem("video_id")
	   var b=localStorage.getItem("user_id")
	   var d=localStorage.getItem("video_summary")
	   var e=localStorage.getItem("video_img_url")
	   var f=localStorage.getItem("channel_name")
		$.ajax({
            type: 'POST',
            url: 'http://192.168.199.114:8080/HJF/user/get_video_comment_list.do',
            dataType: 'JSON',
            data:{user_id:b,video_id:c},
            success: function(data){
            	console.log(data)
             var oDiv=$('<div class="comments-cont">'+
				'<img class="comments-cont-bg" src="'+e+'"/>'+
				'<i onclick="goBack()" class="iconfont">&#xe621;</i>'+
				'<img class="comments-cont-logo" src="../img/images/title_03.png"/>'+
				'<p>'+d+'</p>'+
				'<div class="comments-top-head"><div></div>'+
						   ' <h2>'+data.data.comment_list.length+'条评论</h2>'+
						   ' <div></div>'+
				'</div><p class="write-comments">写评论</p>'+
			'</div>')
              $('.comments').append(oDiv)
            	/*获取评论列表*/
            	var Ul=$('<ul class="comments-total clear"></ul>')
            	$.each(data.data.comment_list,function(index){
            		if(data.data.comment_list[index].comment_is_laud==0){
            			var aLi=$('<li class="comments-content clear">'+
							'<img class="comments-content-img" src="'+data.data.comment_list[index].user_head_img_url+'"/>'+
							'<div class="comments-content-tv clear">'+
								'<div class="comments-content-left">'+
									'<p>'+f+'</p>'+
									'<p>'+data.data.comment_list[index].comment_time+'</p>'+
									'<p>'+data.data.comment_list[index].comment_content+'</p>'+
								'</div><div class="comments-content-right">'+
									'<i class="iconfont dianzan">&#xe603;</i>'+
									'<span class="zan-total">'+data.data.comment_list[index].comment_laud_num+'</span>'+
								'</div></div>'+
					    '</li>')
            		}else{
            			var aLi=$('<li class="comments-content clear">'+
							'<img class="comments-content-img" src="'+data.data.comment_list[index].user_head_img_url+'"/>'+
							'<div class="comments-content-tv clear">'+
								'<div class="comments-content-left">'+
									'<p>'+f+'</p>'+
									'<p>'+data.data.comment_list[index].comment_time+'</p>'+
									'<p>'+data.data.comment_list[index].comment_content+'</p>'+
								'</div><div class="comments-content-right">'+
									'<i class="iconfont dianzan">&#xe638;</i>'+
									'<span class="zan-total">'+data.data.comment_list[index].comment_laud_num+'</span>'+
								'</div></div>'+
					    '</li>')
            		}
            	Ul.append(aLi)
            	})
            	$('.comments').append(Ul)
            	/*评论点赞*/
            		$('.dianzan').one('click',function(){
            			var _this=$(this).parent().parent().parent().index()
            			console.log(_this)
            			if(data.data.comment_list[_this].comment_is_laud==0){
            				var zan=$(this).siblings('.zan-total').html()
				           	  zan++
				           	  $(this).siblings('.zan-total').html(zan)
				           	  $(this).html('&#xe638;')
				           	  var comment=data.data.comment_list[_this].comment_id
            				$.ajax({
					            type: 'POST',
					            url: 'http://192.168.199.114:8080/HJF/user/laud_video_comment.do',
					            dataType: 'JSON',
					            data:{user_id:b,comment_id:comment},
					            success: function(data){
					            console.log(data)
					            },
					            error: function(xhr, type){
					                alert('Ajax error!');
					            }
					        });
            				$(this).html('&#xe638;')
            			}else{
            				var zan=$(this).siblings('.zan-total').html()
				           	  zan--
				           	  $(this).siblings('.zan-total').html(zan)
				           	  var comment=data.data.comment_list[_this].comment_id
            				$.ajax({
					            type: 'POST',
					            url: 'http://192.168.199.114:8080/HJF/user/cancel_laud_video_comment.do',
					            dataType: 'JSON',
					            data:{user_id:b,comment_id:comment},
					            success: function(data){
					            console.log(data)	
					            },
					            error: function(xhr, type){
					                alert('Ajax error!');
					            }
					        });
            				$(this).html('&#xe603;')
            			}
            		})
            	/*写评论*/
            	$('.write-comments').one('click',function(){
						$('.mask').show()
			    	  $('.mask-top').show()
			    	  $('.mask-textarea').focus()
					})
				    $('.mask-delect').on('click',function(){
				    	$('.mask').hide()
				    	$('.mask-top').hide()
				    })
				    $('.mask-send').on('click',function(){
				    	$('.mask').hide()
				    	$('.mask-top').hide()
				 })
				  /*评论发送*/
				 $('.mask-send').on('click',function(){
				 	var cont=$('.mask-textarea').val()
		          if( cont==''){
		          	alert('请输入内容')
		          }else{
		          	 $.ajax({
			            type: 'POST',
			            url: 'http://192.168.199.114:8080/HJF/user/add_video_comment.do',
			            dataType: 'JSON',
			            data:{user_id:b,video_id:c,comment_content:cont},
			            success: function(data){
			            	console.log(cont)
			            	if(data.result==0){
			            		layer.msg('已评论过了');
			            	}else{
			            		var aLi=$('<li class="comments-content clear">'+
									'<img class="comments-content-img" src="../img/images/circle_07.jpg"/>'+
									'<div class="comments-content-tv clear">'+
										'<div class="comments-content-left">'+
											'<p>'+f+'</p>'+
											'<p>'+getTime()+'</p>'+
											'<p>'+cont+'</p>'+
										'</div>'+
										'<div class="comments-content-right">'+
											'<i class="iconfont dianzan">&#xe603;</i>'+
											'<span class="zan-total">0</span>'+
										'</div>'+
									'</div>'+
							    '</li>')
			            		Ul.append(aLi)
			            	   }
				            },
				            error: function(xhr, type){
				                alert('Ajax error!');
				            }
				        });
		          	$('.mask-textarea').val('')
		          }
				})
            },
            error: function(xhr, type){
                alert('Ajax error!');
            }
        });
        /*写入评论*/
		
	</script>
</html>
